<template>
  <a-modal
    :title="title"
    width="30%"
    :keyboard="false"
    :maskClosable="false"
    :visible="visible"
    :confirmLoading="loading"
    :footer="null"
    @cancel="()=>{this.visible=false}"
  >
    <template>
      <div class="UploadFiles" :key="FileKey">
        <a-upload
          name="file"
          ref="upload"
          list-type="picture"
          :multiple="false"
          :action="$rootUrl+leading"
          :headers="headers"
          accept=".xlsx,.xls"
          @change="handleChange"
          class="uploadCL"
          :before-upload="beforeUploadcl">
          <a-button class="uploadBT" type="primary">
            <a-icon type="upload" />
            上传数据
          </a-button>
        </a-upload>
      </div>
    </template>
    <waiting-load ref="waitingLoad"></waiting-load>
  </a-modal>
</template>
<script>
import Token from '../../utils/cache/TokenCache'
import WaitingLoad from '@/components/tools/WaitingLoad'
import { FileDownloadByUrl } from '@/components/FileOperations/FileDownLoad'

export default {
  components: {
    Token,
    WaitingLoad
  },
  props: {
    parentObj: Object,
    leading: { type: String, required: false }
  },
  data () {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      loading: false,
      title: '',
      FileKey: '',
      headers: {
        authorization: 'Bearer ' + Token.getToken()
      }
    }
  },
  watch: {
    visible () {
      if (this.visible) {
        this.FileKey = ''
      } else {
        this.FileKey = Math.random()
      }
    }
  },
  methods: {
    init () {
      this.visible = true
    },
    openForm (title) {
      this.init()
      this.title = title
    },
    beforeUploadcl (file) { // 上传之前回调，判断上传类型
      this.loading = true
      const isSheet = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isSheet) {
        this.loading = false
        this.$message.error('请选择xlsx类型文件')
      }
      this.loading = false
      return isSheet
    },
    handleChange (info) {
      this.$refs.waitingLoad.openForm()
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        if (info.file.response.Success === false) {
          this.$message.error(`${info.file.name}文件,${info.file.response.Msg},请检查文件内容！ `)
          this.$refs.waitingLoad.closeForm()
          this.visible = false
        } else {
          this.$message.success(`${info.file.name}  文件上传成功！${info.file.response.Msg}`)
          if (info.file.response.Data != null && info.file.response.Data.records > 0) {
            this.openNotification(info.file.response.Data, '请下载导入失败的信息记录！')
          }
          this.$emit('onchange')
          this.$refs.waitingLoad.closeForm()
          this.visible = false
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 文件上传失败！`)
        this.$refs.waitingLoad.closeForm()
        this.visible = false
      }
    },
    openNotification (data, description) {
      const key = `open${Date.now()}`
      this.$notification.open({
        message: '导入信息提示',
        description: description,
        duration: 20,
        icon: <a-icon type="smile" style="color: #FFB833" />,
        btn: h => {
          return h(
            'a-button',
            {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: () => FileDownloadByUrl(data.fileUrl, data.fileName)
                // click: () => FileDownloadByFile(data.fileUrl)
              }
            },
            '下载'
          )
        },
        key,
        onClose: close
      })
    }
  }
}
</script>
<style scoped>
.UploadFiles {
  width: 100%;
  text-align: center;
  margin: 30px auto;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 10px;
}

.uploadCL {
  width: 100%;
  text-align: left;
  margin: 5px auto;
}

.uploadBT {
  width: 100%;
  margin: 20px auto;
}
</style>
